<template>
  <div class="login-container">
    <span class="left-logo">
      <svg-icon icon-class="iscas" />
      <span class="left-title">{{ this.$website.title }}</span>
    </span>
    <div class="login-main">
      <h1>登录</h1>
      <UserLogin />
    </div>
    <div class="bottom">
      <p class="text">
        <span class="title">中国科学院软件研究所</span>
        <span>Institute of Software Chinese Academy of Sciences</span>
      </p>
    </div>
  </div>
</template>

<script>
import UserLogin from "./userlogin.vue";
export default {
  name: "Login",
  components: {
    UserLogin,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background: url("~@/assets/img/login.png") no-repeat center;
  background-size: cover;

  .bottom {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 60px;
    span {
      font-size: 12px;
      display: block;
      color: @primary;
    }
    .title {
      font-size: 24px;
      padding-bottom: 10px;
      letter-spacing: 10px;
    }
  }
  .left-logo {
    position: absolute;
    top: 30px;
    left: 30px;
    height: 32px;
    display: flex;

    .svg-icon {
      width: 150px;
      height: 46px;
      color: @primary;
    }
  }
  .left-title {
    font-size: 26px;
    font-weight: bold;
    color: @primary;
  }
}
.login-main {
  position: absolute;
  right: 9%;
  top: 28%;
  z-index: 9;
  padding: 50px 30px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 1px 1px 2px #eee;
  h1 {
    margin: 0 0 30px;
    text-align: center;
    color: #333;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
  }
}
</style>
